<!-- $Id$
 *
 * Red Pitaya Network Manager
 *
 * Author: Artem Kokos
 *
 * (c) Red Pitaya  http://www.redpitaya.com
 *
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"></meta>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Red Pitaya</title>
    <link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../assets/popupstack.css" type="text/css" />
    <link rel="stylesheet" href="../assets/loader.css?1" type="text/css">
    <link rel="stylesheet" href="../assets/help-system/help-system.css" type="text/css" />
    <link rel="stylesheet" href="css/style.css?2">
    <link rel="stylesheet" href="css/blocks.css?2">
    <script src="../assets/jquery/jquery-2.1.3.min.js"></script>
    <script src="../assets/jquery/jquery-ui.min.js"></script>
    <script src="../assets/jquery/jquery.ui.touch-punch.min.js"></script>
    <script src="../assets/jquery/jquery.mousewheel.min.js"></script>
    <script src="../assets/jquery/jquery.simulate.js"></script>
    <script src="../assets/jquery/jquery.cookie.js"></script>
    <script src="../assets/jquery/jquery.browser.js"></script>
    <script src="../assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="../assets/fastclick.min.js"></script>
    <script src="../assets/zlib_and_gzip.min.js"></script>
    <script src="../assets/browsercheck.js"></script>
    <script src="../assets/analytics-core.js"></script>   
    <script src="../assets/popupstack.js"></script>
    <script src="../assets/help-system/help-system.js"></script>
    <script src="js/help-nm.js"></script>
    <script src="js/manager.js?4"></script>
    <script src="js/analytics-main.js"></script>
</head>

<body>
    <div id="loader-wrapper">
        <div id="loader"></div>
    </div>
    <div id="header">
        <div id="description">&nbsp;</div>
    </div>
    <div class="full-content">
        <div class="container-fluid">
            <div class="navbar navbar-inverse" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">T</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="/">
                            <img class="back-btn" src="../assets/images/navigation_arrow_left.png">
                        </a>
                        <img class="logo" width=110 src="../assets/images/navigation_logo.png">
                    </div>
                    <div class="logo-network-manager">
                        RedPitaya Network Manager
                    </div>
                </div>
            </div>
            <div id="global_container" style="position: relative;">
                <div id="all_networks">
                    <!-- ETH0 SETUP -->
                    <div id="eth0_block" class="net_settings_block" align=center>
                        <div>
                            <div style="position: absolute;"><img src="img/net-icons/lan.png"></div>
                            <div>Wired connection status</div>
                        </div>
                        <div id="eth0_status_result" class="eht0_entries" style="display: block;">
                            <dev id="eth0_status">
                                <div id="eth0_inputs_labels" class="status_labels" style="min-height: 125px;">
                                    <div style="font-size: 15pt; padding-top: 10px;">Address:</div>
                                    <div style="font-size: 15pt; padding-top: 10px;">Gateway:</div>
                                </div>
                                <div id="eth0_inputs_entry" class="status_entry" style="min-height: 125px;">
                                    <div style="padding-top: 10px;">
                                        <label id="eth0_address_label" style="font-size: 13pt;">None</label>
                                    </div>
                                    <div style="padding-top: 10px;">
                                        <label id="eth0_gateway_label" style="font-size: 13pt;">None</label>
                                    </div>
                                </div>
                            </dev>
                            <div style="height: 30px;"></div>
                            <select id="eth0_mode" class="form-control type_select">
                                <option selected value="#eth0_dhcp_mode">DHCP</option>
                                <option value="#eth0_static_mode">Static</option>
                            </select>
                            <div id="eth0_static_mode" style="display: none;">
                                <dev id="eth0_inputs">
                                    <div id="eth0_inputs_labels" class="status_labels">
                                        <div style="font-size: 15pt; padding-top: 10px;">IP address:</div>
                                        <div style="font-size: 15pt; padding-top: 10px;">Gateway:</div>
                                        <div style="font-size: 15pt; padding-top: 10px;">DNS:</div>
                                    </div>
                                    <div id="eth0_inputs_entry" class="status_entry">
                                        <div style="padding-top: 6px;">
                                            <input id="ip_address_and_mask_input" type="text" class="form-control inputs">
                                        </div>
                                        <div style="padding-top: 6px;">
                                            <input id="gateway_input" type="text" class="form-control inputs">
                                        </div>
                                        <div style="padding-top: 6px;">
                                            <input id="dns_address_input" type="text" class="form-control inputs">
                                        </div>
                                    </div>
                                </dev>
                            </div>
                            <div>
                                <button id="network_apply" class="form-control btn eth0_apply">Apply</button>
                            </div>
                        </div>
                    </div>
                    <!-- WLAN0 SETUP -->
                    <div id="wlan0_block" class="net_settings_block" align=center>
                        <div id="wlan0_block_nodongle" style="display: none;">
                            <img src="img/net-icons/nodongle.png">
                            <div style="margin-top: 15px;">WIFI DONGLE IS NOT CONNECTED</div>
                        </div>
                        <div id="wlan0_block_entry" style="display: block;">
                            <div>
                                <div style="position: absolute;"><img src="img/net-icons/wlan.png"></div>
                                <div>Wireless connection status</div>
                            </div>
                            <dev id="wlan0_status">
                                <div id="wlan0_inputs_labels" class="status_labels" style="min-height: 160px;">
                                    <div style="font-size: 15pt; padding-top: 10px;">Mode:</div>
                                    <div style="font-size: 15pt; padding-top: 10px;">SSID:</div>
                                    <div style="font-size: 15pt; padding-top: 10px;">Address:</div>
                                </div>
                                <div id="wlan0_inputs_entry" class="status_entry" style="min-height: 160px;">
                                    <div style="padding-top: 10px;">
                                        <label id="wlan0_mode_label" style="font-size: 13pt;">None</label>
                                    </div>
                                    <div style="padding-top: 10px;">
                                        <label id="wlan0_ssid_label" style="font-size: 13pt;">None</label>
                                    </div>
                                    <div style="padding-top: 10px;">
                                        <label id="wlan0_address_label" style="font-size: 13pt;">None</label>
                                    </div>
                                </div>
                            </dev>
                            <select id="wlan0_mode" class="form-control type_select">
                                <option selected value="#wlan0_client_mode">Client Mode</option>
                                <option value="#wlan0_ap_mode">Access Point Mode</option>
                            </select>
                            <!-- WLAN ACCESS POINT SETTINGS -->
                            <div id="wlan0_ap_mode" class="wlan0_entries" style="display: none; padding-top: 25px">

                                <div id="ssid_check_len" style="display: none; font-size: 10pt; color: #F00; text-align: right;">*Use 1 or more characters</div>
                                <div id="eth0_inputs_labels" class="status_labels">                
                                    <div style="font-size: 15pt;">SSID:</div>  
                                </div>
                                <div id="eth0_inputs_entry" class="status_entry">
                                    <div>
                                        <input id="ssid_input" type="text" class="form-control inputs">
                                    </div>
                                </div>

                                <div id="pass_check_len" style="display: none; font-size: 10pt; padding-top: 15px; color: #F00; text-align: right;">*Use 8 or more characters</div>
                                <div id="pass_check_sym" style="display: none; font-size: 10pt; padding-top: 15px; color: #F00; text-align: right;">*Contains incorrect symbols</div>
                                <div id="eth0_inputs_labels" class="status_labels">                
                                    <div style="font-size: 15pt;">Password:</div>
                                </div>
                                <div id="eth0_inputs_entry" class="status_entry">          
                                    <div>
                                        <input id="password_input" type="password" class="form-control inputs">
                                    </div>
                                </div>
                                <div>
                                    <button id="access_point_create" class="form-control btn eth0_apply">Create</button>
                                </div>
                            </div>
                            <!-- WLAN CLIENT SETTINGS -->
                            <div id="wlan0_client_mode" class="wlan0_entries" style="display: block;">
                                <div id="wifi_list">
                                    <div style="float: left; width: 100%; text-align: center;"><img src="/assets/images/loader.gif" width="35px"></div>
                                </div>
                                <button id="refresh_list_btn" class="form-control btn eth0_apply">Refresh list</button>
                                <div id="separator_or">
                                    OR
                                </div>
                                <div style="display: block; padding-top: 25px">
                                    <div id="eth0_inputs_labels" class="status_labels">
                                        <div style="font-size: 15pt; padding-top: 10px;">SSID:</div>
                                        <div style="font-size: 15pt; padding-top: 10px;">Password:</div>
                                    </div>
                                    <div id="eth0_inputs_entry" class="status_entry">
                                        <div style="padding-top: 6px;">
                                            <input id="ssid_input_client" type="text" class="form-control inputs">
                                        </div>
                                        <div style="padding-top: 6px;">
                                            <input id="password_input_client" type="password" class="form-control inputs">
                                        </div>
                                    </div>
                                    <div>
                                        <button id="client_connect" class="form-control btn eth0_apply">Connect</button>
                                        <button id="clear_entry" class="form-control btn eth0_apply">Clear</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <div>
        <div id="sys_info_view" style="display:none; position:fixed; bottom:0; left: 0; background-color: rgba(0, 0, 0, 0.2); text-align:left; padding: 5px; font-size:12px; color:white; ">
            FPS:<span id="fps_view">0</span> Throughput:<span id="throughput_view">0</span> CPU Load:<span id="cpu_load">0</span>
            <br/> Memory total:<span id="totalmem_view">0</span> Free:<span id="freemem_view">0</span> Usage:<span id="usagemem_view">0</span>
        </div>
    </div>
    <script type="text/javascript">
    $(document).ready(function() {
        $("#ip-addr").text(window.location.hostname);
    })
    </script>
    <!-- Dongle Not Enabled Dialog -->
    <div class="modal fade" id="dongle_missing" tabindex="-1" role="dialog" aria-labelledby="bazaar_naLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="bazaar_naLabel">Wi-Fi dongle missing</h4>
                </div>
                <div class="modal-body" style="text-align: center; font-size: 18px;">
                    <p id="wtools_missing_msg">Wi-Fi USB dongle not connected to your RedPitaya. Please, connect it before working with network manager.</p>
                </div>
                <div class="modal-footer">
                    <div class="bazaar-link" style="float: left; width: 50%;">
                        <a href="/" style="border: 1px solid; left: 140px;" class="list-group-item btn">Close</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Offline Dialog -->
    <div class="modal fade" id="offline_dialog" tabindex="-1" role="dialog" aria-labelledby="bazaar_naLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="bazaar_naLabel">Internet connection missing</h4>
                </div>
                <div class="modal-body" style="text-align: center; font-size: 18px;">
                    <p id="wtools_missing_msg">Your RedPitaya has no connection to the Internet. Installing is not possible.</p>
                </div>
                <div class="modal-footer">
                    <div class="bazaar-link" style="float: left; width: 50%;">
                        <a href="#" style="border: 1px solid;" data-dismiss="modal" class="list-group-item btn">OK</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="feedback_error" tabindex="-1" role="dialog" aria-labelledby="bazaar_naLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="oops_label">Oops, something went wrong</h4>
                </div>
                <div class="modal-body" style="text-align: center; font-size: 18px;">
                    <p>Please send us the report and help us to fix this issue</p>
                    <p>Thank you!</p>
                </div>
                <div class="modal-footer">
                    <div class="bazaar-link" style="float: left; width: 50%;">
                        <a href="#" style="border: 1px solid;  width: 100%" id="send_report_btn" data-dismiss="modal" class="list-group-item btn">Send report</a>
                    </div>
                    <div class="bazaar-link" style="float: left; width: 50%;">
                        <a href="#" style="border: 1px solid;  width: 100%" id="restart_app_btn" data-dismiss="modal" class="list-group-item btn">Restart Application</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="analytics_dialog" tabindex="-1" role="dialog" aria-labelledby="bazaar_naLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="bazaar_naLabel">Statistics</h4>
                </div>
                <div class="modal-body">
                    <p>Would you like to help Red Pitaya team to improve its product and services by occasionally providing anonymous diagnostic and usage information?</p>
                </div>
                <div class="modal-footer">
                    <div class="bazaar-link" style="float: left; width: 50%;">
                        <a href="#" data-dismiss="modal" id="enable_analytics" class="list-group-item btn">Yes</a>
                    </div>
                    <div class="bazaar-link" style="float: left; width: 50%;">
                        <a href="#" data-dismiss="modal" id="disable_analytics" class="list-group-item btn">No</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
